<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用getJSON()方法异步加载JSON格式数据</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<h2><pre>
    使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数据，并对获取的数据进行解析，显示在页面中，
    它的调用格式为：jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
    其中，url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数。
</pre></h2>
<div id="divtest">
    <div class="title">
        <span class="fl">我最喜欢的一项运动</span>
                <span class="fr">
                    <input id="btnShow" type="button" value="加载" />
                </span>
    </div>
    <ul></ul>
</div>

<script type="text/javascript">
    $(function () {
        $("#btnShow").bind("click", function () {
            var $this = $(this);
            $.getJSON("http://www.imooc.com/data/sport.json",function(data){
                $this.attr("disabled", "true");
                $.each(data, function (index, sport) {
                    if(index==3)
                        $("ul").append("<li>" + sport["name"] + "</li>");
                });

            });
        })
    });
</script>
</body>
</html>